<template>
  <div class="div1" :style="backgroundDiv" id="app">
    <div class="div2">
      <img class="img" src="../assets/logo.png">
      <input class="input1" v-model="loginName" type="text" placeholder="请输入用户名"/>
      <input class="input2" v-model="passWord" type="password" placeholder="请输入密码"/>
      <div>
        <el-row style="margin-top:10px;">
          <el-col :span="12">
            <el-button class="button1" type="primary" @click="denglu">登录</el-button>
          </el-col>
          <el-col :span="12">
            <el-button  class="button2" type="primary">重置</el-button>
          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'loginName',
  mounted () {
    this.$axios.get('http://localhost:8090/drugs//test').then(res => {
      console.log(res)
    })
  },
  data () {
    return {
      passWord: '',
      loginName: '',
      backgroundDiv: {
        backgroundImage: 'url(' + require('@/assets/loginbc.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }
    }
  },
  methods: {
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    },
    denglu () {
      if (this.loginName === '') {
        this.myMessage('error', '请输入账号')
      } else {
        if (this.passWord === '') {
          this.myMessage('error', '请输入密码')
        } else {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.$axios.get('http://localhost:8081/login', {
            params: {
              loginName: this.loginName,
              passWord: this.passWord
            }
          }).then(res => {
            if (res.data.status === 'success') {
              window.localStorage.setItem(res.data.obj.saTokenInfo.tokenName, res.data.obj.saTokenInfo.tokenValue)
              window.localStorage.setItem('empName', res.data.obj.name)
              window.localStorage.setItem('empId', res.data.obj.id)

              this.myMessage(res.data.status, res.data.message)

              this.$router.push('/home')
            } else {
              this.myMessage(res.data.status, res.data.message)
            }
          }).catch(err => {
            console.log(err)
          })
          loading.close()
        }
      }
    }
  }
}
</script>
<style>
  .img{
    width:100px;
    height:100px;
    position: absolute;
    margin-top: -39px;
    margin-left: 199px;
  }
  .div1{
    width: 100%;
    height:100%;
    overflow: hidden;
  }
  .div2{
    width: 500px;
    height: 300px;
    background-color: #0D4280;
    justify-content: center;
    margin:0 auto;
    margin-top: 18%;
  }
  .input1{
    height: 35px;
    width: 440px;
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 100px;
  }
  .input2{
    height: 35px;
    width: 440px;
    margin-left: 30px;
  }
  .button1{
    margin-top: 20px;
    margin-left: 205px;
  }
  .button2{
    margin-left: 10px;
  }
</style>
